<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
       #box{
       	position: absolute;
       	width: 100%;
       	height:1000px;
       	background: rgba(124,181,12,.3);
       	display: none;
       }
       #tk{
       	position: absolute;
       	top:50px;
       	left: 200px;
       	width: 200px;
       }
       #box-a{
       	border: 1px solid #ccc;
       	box-shadow: 1px 1px 2px #ccc;
       	overflow:hidden;
       	border-radius: 5px;
       	background: rgba(123,123,123,.5);
       	width: 300px;
       	height: 200px;
       	margin:200px auto;
       }
       .div-top{
       	line-height: 30px;
       	height:30px;
       	width: 300px;
       	background: rgb(255,255,255);
       }
       .div-bottom{
       	margin-top:75px;
        height:30px;
       	width: 300px;

       }
       p{
       	margin-top: 50px;
       	text-align: center;
       }
       #b1{
       	background:#69bbdc;
       	padding: 2px;
       	margin-left:30px;
       }
       #b2{
       	padding: 2px;
       	float:right;
       	margin-right:30px;
       }
       #b1,#b2{
       	border:0;
       }

	</style>
</head>
<body>
  <button id="tk">弹框</button>
  <div id="box">
     <div id="box-a">
      <div class="div-top">提示</div> 
      <p>需要删除此选项吗？</p>
      <div class="div-bottom">     
      <button id="b1">关 闭</button>
      <button id="b2">取 消</button>
      </div>

     </div>
  </div>
  
  
  <div onclick="a()" style="width: 200px; height: 200px; background: yellowgreen;">
  	<div onclick="b()" style="width: 100px; height: 100px; background: azure;"></div>
  </div>
  
  
  <script type="text/javascript">
 	var tk=document.getElementById("tk"),
 	    b1=document.getElementById("b1"),
 		oDiv=document.getElementById("box");
 		tk.onclick=function nobox(){
 			oDiv.style.display="block";
 		}
 		b1.onclick=function(){
 			oDiv.style.display="none";
 		}
  </script>
</body>
</html>